<template>
  <div class="hotlist">
<!-- <span @click="$router.go(-1)">&lt;</span> -->
<form action="/">
<van-search
  v-model="value"
  show-action
  placeholder="请输入搜索关键词"
  @search="onSearch"
  @cancel="onCancel"
 @keydown.enter="onSearch"
></van-search>
</form>
<br>
<div class="clear"><h1>历史搜索</h1><h5><img src="../../../public/imagescx/clear.png" alt="" @click="clearall"></h5></div>
<br>
<div class="hist"><span v-for="(item,index) in newbool" :key="index">{{item.com}}</span></div>
<br>
<h1>探索发现</h1>
<br>

<div class="explore"><span>某公司</span><span>某公司</span><span>某公司</span>
<span>某公司</span><span>某公司</span><span>某公司</span>
<span>某公司</span><span>某公司</span><span>某公司</span>
<span>某公司</span>
</div>

  </div>
</template>

<script>
 
export default {
  data() {
  return {
    value: '',
    // searchlist:[]
    num:0
  };
},
computed:{
  newbool(){this.$store.dispatch('SEARCH_DATA_QUEST')

    return    this.$store.state.caixia.search
  }
},

methods: {
  onSearch() {
    this.$store.dispatch('SEARCH_QUEST',{com:this.value}) 
    this.$router.push('/searchchild')
    this.$store.dispatch('COM_LIST',{comlist:this.value})  
    
    this.value=''
  
  },
  onCancel() {
    this.value='',
    this.$router.push('/exper/client')

  },
  clearall(){
    ++this.num
    this.$store.dispatch('CLEAR_LIST',{clearlist:this.num})
  }
}
}
</script>

<style lang="scss" scoped>
  .hotlist{
    width: 100%;
    box-sizing: border-box;
  }
h1{
  font-size: .2rem;
  font-weight: 700;
}
.hist{
  width: 100%;
  
 display: flex;
 flex-wrap: wrap;
 flex-shrink: 0;
}
span{
  background-color: rgba(128, 128, 128, 0.194);
height: .2rem;
width: 1rem;
margin-right: .2rem;
text-align: center;
line-height: .2rem;
}
.explore{
  width: 100%;
  height: 2rem;
 display: flex;
 flex-wrap: wrap;
 flex-shrink: 0;
}
.clear{
  display: flex;
  justify-content: space-between;
}
</style>